<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>研学旅行</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="static/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script type="text/javascript" th:src="@{/js/echarts.js}"></script>
    <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
</head>
<body>
    <!-- 顶部开始 -->
    <div class="container" th:include="head :: header">
    	
    </div>
    <!-- 顶部结束 -->
    <!-- 中部开始 -->
    <div class="wrapper">
        <!-- 左侧菜单开始 -->
        <div class="left-nav">
        	<div id="side-nav"  th:include="left :: left_nav">
        	
        	</div>
        </div>
        <!-- 左侧菜单结束 -->
        <!-- 右侧主体开始 -->
        <div class="page-content">
          <div class="content">
            <!-- 右侧内容框架，更改从这里开始 -->
            <blockquote class="layui-elem-quote">
                每月收入
            </blockquote>
            <div class="">
                	<label class="layui-form-label">年份:</label>
                	<select class="layui-select" id="select" onchange="show()" style="width: 150px;">
                		<option th:each="itme,state : ${years}" th:text="${itme.years}">
                			
                		</option>
                	</select>
                	
            </div>
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main" style="width: 100%;height:400px;"></div>
            <blockquote class="layui-elem-quote" style="text-align: center;">
            
            	<p style="font-size:20px;font-weight:600;">每月收入表格数据图</p>
            	
            	<a id="daoru" class="layui-btn" style="position:absolute;right: 50px;top:540px" onclick="daoru()" >生成Excel文件</a>
                
                <br>
                <table class="layui-table" >
  					<thead>
  						<tr>
  							<th>月份</th>
  							<th>收入</th>
  						</tr>
  					</thead>
  					<tbody id="tb">
  							
  					</tbody>
				</table>				
            </blockquote>
            
            <!-- 右侧内容框架，更改从这里结束 -->
          </div>
        </div>
        <!-- 右侧主体结束 -->
    </div>
    <!-- 中部结束 -->
    <!-- 底部开始 -->
    <div class="footer">
        <div class="copyright">Copyright ©2019 研学旅行管理系统</div>  
    </div>
    <!-- 底部结束 -->
    <!-- 背景切换开始 -->
    <div class="bg-changer">
        <div class="swiper-container changer-list">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img class="item" th:src="@{/images/a.jpg}" alt=""></div>
                <div class="swiper-slide"><img class="item" th:src="@{/images/b.jpg}" alt=""></div>
                <div class="swiper-slide"><img class="item" th:src="@{/images/c.jpg}" alt=""></div>
                <div class="swiper-slide"><img class="item" th:src="@{/images/d.jpg}" alt=""></div>
                <div class="swiper-slide"><img class="item" th:src="@{/images/e.jpg}" alt=""></div>
                <div class="swiper-slide"><img class="item" th:src="@{/images/f.jpg}" alt=""></div>
                <div class="swiper-slide"><img class="item" th:src="@{/images/g.jpg}" alt=""></div>
                <div class="swiper-slide"><img class="item" th:src="@{/images/h.jpg}" alt=""></div>
                <div class="swiper-slide"><img class="item" th:src="@{/images/i.jpg}" alt=""></div>
                <div class="swiper-slide"><img class="item" th:src="@{/images/j.jpg}" alt=""></div>
                <div class="swiper-slide"><img class="item" th:src="@{/images/k.jpg}" alt=""></div>
                <div class="swiper-slide"><span class="reset">初始化</span></div>
            </div>
        </div>
        <div class="bg-out"></div>
        <div id="changer-set"><i class="iconfont">&#xe696;</i></div>   
    </div>
    <!-- 背景切换结束 -->
        
        <script src="http://cdn.bootcss.com/echarts/3.3.2/echarts.min.js" charset="utf-8"></script>
        <script type="text/javascript" th:src="@{/js/echarts-for-x-admin.js}"></script>
		<script type="text/javascript" th:src="@{/js/vue.js}" ></script>
        <script type="text/javascript">
        var dom = document.getElementById("main");
        
   	 var vue = new Vue({
   		 
   		 el:".bg-out",
   		 data : {
   			 data : []
   		 }
   		 
   	 });
   	 
   	 function daoru(){
   			var years = $("#select").val();
    		MonthsSrExcel = "http://localhost:8080/MonthsSrExcel?years="+years;
    		window.location.href=MonthsSrExcel; 
    }
   	 
   	 show();
   	function show(){
   		var id = $("#select").val();
   		 $.ajax({
			url:"http://localhost:8080/toAjaxQueryMonthSr",
			data:{
				years:id
			},
			type:"post",
			dataType:"json",
			success:function(data){
				vue.data=data;
				begin();
				happy(id);
			}
			
		});
   		
   	}
   	function happy(years){
    	$.ajax({
 			url:"http://localhost:8080/toAjaxQueryMonthSrTwo",
 			data:{
 				years:years
 			},
 			type:"post",
 			dataType:"json",
 			success:function(data){
 				var user='';
 				for(var i =0;i<data.length;i++){
 					user+="<tr>";
					user+="<td>"+data[i].months+"</td>";
					user+="<td>"+data[i].sumprice+"</td>";
					user+="</tr>";
				}
 				$("#tb").html(" ");
				$("#tb").append(user);
 			}
 			
 		});
    }
   	function begin(){
   		setTimeout(function(){       
   			var myChart = echarts.init(dom);
   			var app = {};
   			option = null;
   			app.title = '坐标轴刻度与标签对齐';

   			option = {
   			    color: ['#3398DB'],
   			    tooltip : {
   			        trigger: 'axis',
   			        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
   			            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
   			        }
   			    },
   			 title: {
                 text: '每月收入统计'
             },
   			    grid: {
   			        left: '3%',
   			        right: '4%',
   			        bottom: '3%',
   			        containLabel: true
   			    },
   			 toolbox: {
   				show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                },
                itemSize:18,//工具栏 icon 的大小
                iconStyle:{
                    normal:{
                      borderColor:'skyblue',
                      
                    }
                
                }
             },
   			    xAxis : [
   			        {
   			            type : 'category',
   			            data : ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
   			            axisTick: {
   			                alignWithLabel: true
   			            }
   			        }
   			    ],
   			    yAxis : [
   			        {
   			            type : 'value'
   			        }
   			    ],
   			    series : [
   			        {
   			            name:'收入',
   			            type:'bar',
   			            barWidth: '60%',
   			            data:vue.data/*[100, 521, 200, 334, 390, 330, 220,100,300,400,600,750]*/
   			        }
   			    ]
   			    
   			};
   			;
   			if (option && typeof option === "object") {
   			    myChart.setOption(option, true);
   			}
   			},100)
   		
   	}
   	
        $(function(){

        });
        
        </script>
</body>
</html>